<template>
  <div class="search-popup">
    <van-search
      v-model="searchvalue"
      show-action
      :placeholder="placeholder"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <history
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
      @hotTagClick="hotTagClick"
    ></history>
    <seachTipslist
      v-else-if="blockShow == 2"
      :seachTipslist="seachTipslist"
      @tipsClick="tipsClick"
    ></seachTipslist>
    <seachProuducts
      v-else-if="blockShow == 3"
      :goodslist="goodslist"
      :filterCategory="filterCategory"
      @categoryChangeVal="categoryChangeVal"
      @priceChangeVal="priceChangeVal"
    ></seachProuducts>
  </div>
</template>

<script>
import history from "@/components/SearchPopup/history";
import seachTipslist from "@/components/SearchPopup/seachTipslist";
import seachProuducts from "@/components/SearchPopup/seachProuducts";
import {
  GetSearchPopoupData,
  GetsearchTipList,
  GetsearchProuducts,
} from "@/request/api";
export default {
  components: {
    history,
    seachProuducts,
    seachTipslist,
  },
  data() {
    return {
      //搜索框的c-model的值
      searchvalue: "",
      //搜索框的placeholder的值
      placeholder: "请输入搜索关键词",
      //用来决定搜索框弹出的是哪个界面
      //   blockShow=1 是弹出历史记录
      //   blockShow=2 是弹出列表界面
      //   blockShow=3 弹出商品展示列表
      blockShow: 1,
      // 历史记录数组
      historyKeywordList: [],
      // 热搜数据
      hotKeywordList: [],
      // 搜索提示数组
      seachTipslist: [],
      // 商品展示页面数组
      goodslist: [],
      // 商品展示页面分类数组
      filterCategory: [],
      // 排序
      order: "desc",
      // 类别ID
      categoryId: 0,
      // 默认排序，可以是ID或者price
      sort: "id",
    };
  },
  created() {
    // 搜索记录与热搜
    GetSearchPopoupData().then((res) => {
      // console.log(res);
      this.placeholder = res.data.defaultKeyword.keyword;
      let { historyKeywordList, hotKeywordList } = res.data;
      this.historyKeywordList = historyKeywordList;
      this.hotKeywordList = hotKeywordList;
    });
  },
  methods: {
    tipsClick() {
      this.onSearch(this.searchvalue);
    },
    // 热门搜索框触发
    hotTagClick(value) {
      // console.log(value);
      this.searchvalue = value;
      this.onSearch(this.searchvalue);
    },
    //历史记录框触发
    tagClick(value) {
      // console.log(value);
      this.searchvalue = value;
      this.onSearch(this.searchvalue);
    },
    // 价格排序触发
    priceChangeVal(value) {
      this.sort = "price";
      this.order = value;
      this.onSearch(this.searchvalue);
    },
    // 分类选择触发
    categoryChangeVal(id) {
      this.categoryId = id;
      this.onSearch(this.searchvalue);
    },
    // 实时搜索
    onInput(value) {
      this.blockShow = 2;
      GetsearchTipList({ keyword: value }).then((res) => {
        // console.log(res);
        this.seachTipslist = res.data;
      });
    },
    //商品展示页面
    onSearch(value) {
      this.blockShow = 3;
      // console.log("执行了搜索");
      GetsearchProuducts({
        keyword: value,
        page: 1,
        size: 50,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      }).then((res) => {
        console.log(res);
        let { goodsList, filterCategory } = res.data;
        //数组更新
        this.goodslist = goodsList;
        // 处理请求数组
        // [{ text: "价格由高到低", value: "a" },{ text: "价格由低到高", value: "b" },],
        // [{id: 0, name: "全部", checked: true}, {id: 1005000, name: "居家", checked: false}]
        let newArr = JSON.parse(
          JSON.stringify(filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        // map(item=>{
        //   return {value: item.id, text: item.name, checked: item.checked}
        // })
        this.filterCategory = newArr;
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  background-color: rgba(239, 239, 239, 1);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
}
</style>